<template>
  <div>
    <div class="top">
      <van-nav-bar
        style="color: black"
        title="职业百科"
        left-text=""
        right-text="◡̈⃝"
        left-arrow
        @click-left="fun()"
      />
      <div class="sou">
        <van-search
          style="width: 100%"
          v-model="value"
          shape="round"
          background="white"
          placeholder="与你相关：web前端工程师"
        />
        <span @click="fan()">取消</span>
      </div>
    </div>
    <div class="bangdan">
      <b>职业榜单</b>
      <span class="quan" @click="lu()">查看全部</span>
      <div class="citiao">BOSS百科词条已收录<i>1016</i>个职业</div>
    </div>
    <main>
      <div class="resou" v-for="v in this.$store.state.qiqi.arr2" :key="v.id">
        <div class="neirong">
          <img :src="v.img" alt="" />
          <span @click="lu()">
            {{ v.name }}&nbsp;&nbsp;&nbsp;&nbsp;<b>〉</b>
          </span>
          <p>1&nbsp;&nbsp;{{ v.bd1 }}</p>
          <p>2&nbsp;&nbsp;{{ v.bd2 }}</p>
          <p>3&nbsp;&nbsp;{{ v.bd3 }}</p>
          <p>4&nbsp;&nbsp;{{ v.bd4 }}</p>
        </div>
      </div>
      <div class="zt">
        <h2>职业专题</h2>
        <div class="zt1">
          <img @click="ad()" src="qiqi/zhiyebaikegen_03.png" alt="" />
          <p style="font-weight: 700">「职业百科」求职情报局</p>
          <p style="font-size: 0.12rem; color: #afafaf">
            如何判断哪份职业最适合我?选哪份工作对我未来更有帮
            助?职业百科「求职情报局」，帮你抉择> >
          </p>
        </div>
      </div>
      <div class="zt">
        <div class="zt1">
          <img src="qiqi/zhiyebaikegen_06.png" alt="" />
          <p style="font-weight: 700">「职业百科」求职情报局</p>
          <p style="font-size: 0.12rem; color: #afafaf">
            如何判断哪份职业最适合我?选哪份工作对我未来更有帮
            助?职业百科「求职情报局」，帮你抉择> >
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      return this.$router.push("/baike");
    },
    fan() {
      this.value = "";
    },
    lu() {
      this.$router.push("/zhiyequan");
    },
    ad() {
      this.$router.push("/zhiyezt");
    },
  },
  data() {
    return {
      value: "",
    };
  },
  mounted() {
    this.$store.dispatch("ZY_SZ");
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.16rem;
}
.top {
  position: fixed;
  top: 0;
  width: 100%;
  .sou {
    width: 3.67rem;
    display: flex;
    justify-content: space-between;
    span {
      width: 0.37rem;
      align-self: center;
    }
  }
}
.bangdan {
  margin-top: 1.03rem;
  padding: 0 0.15rem;
  b {
    font-weight: 700;
  }
  .quan {
    font-size: 0.12rem;
    color: #dddddd;
    float: right;
  }
  .citiao {
    font-size: 0.12rem;
    margin-top: 0.1rem;
    i {
      color: #4faaa8;
    }
  }
}
main {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .resou {
    width: 1.65rem;
    height: 2.24rem;
    margin-top: 0.12rem;
    font-weight: 700;
    .neirong {
      margin-left: 0.1rem;
      margin-left: 0.21rem;
      p {
        margin-top: 0.23rem;
        font-size: 0.14rem;
      }
      span {
        font-size: 0.17rem;
      }
    }
    img {
      width: 0.19rem;
      height: 0.19rem;
    }
    b {
      color: #bababa;
    }
  }
  .zt {
    margin-bottom: 0.2rem;
    h2 {
      margin-right: 2.85rem;
      font-weight: 700;
    }
    .zt1 {
      width: 3.36rem;
      height: 2.78rem;
      margin-left: 0.09rem;
      border: 0.01rem solid #bcbcbc7e;
      border-radius: 0.1rem;
      p {
        padding: 0.04rem 0.1rem;
      }
    }
  }
}
</style>